<template>
	<div>
		<NewSearchDetail v-model="visible" :title="title" :type="true">
			<div class="search-left">
				<div class="top flex j-between">
					<div class="left border-spot m-r-10">
						<div class="left-img">
							<img src="../../../../assets/new/detail_tree1.png" >
							{{detail.others ? detail.others[0].growthSituation : '- -'}}
						</div>
						<div class="left-box">
							<img :src="detail.picture ? detail.picture : treeImg">
						</div>
					</div>
					<div class="right">
						<div class="tree-msg">
							<div class="tree-msg-nav">
								配置情况
								<!-- <span>
									/作业记录
								</span> -->
							</div>
							<div class="tree-msg-detail">
								<div class="tree-msg-list">
									<p>树种：<span>{{treeVarieties.treespecname || '- -'}}</span></p>
									<p>生长类型：<span>{{treeVarieties.growntype || '- -'}}</span></p>
								</div>
								<div class="tree-msg-center">
									<p class="min-w-90">养护建议：</p>
									{{treeVarieties.maintenanceadvice || '- -'}}
								</div>
								<ul class="tree-ul">
									<li class="tree-li">
										<p class="min-w-40">树高：</p>
										<span>{{detail.others ? detail.others[0].treeHeight + 'm' : '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">学名：</p>
										<span>{{detail.others ? detail.others[0].scientificName : '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-60">科属：</p>
										<span>{{treeVarieties.families || '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">树叶密度：</p>
										<span>{{detail.others ? detail.others[0].leavesDensity + '%' : '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">状态：</p>
										<span>{{detail.status || '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">树冠：</p>
										<span>{{detail.others ? detail.others[0].crown : '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">地径：</p>
										<span>{{detail.others ? detail.others[0].groundDiameter + 'm' : '- -'}}</span>
									</li>
									<li class="tree-li">
										<p class="min-w-40">胸径：</p>
										<span>{{detail.others ? detail.others[0].dbh + 'm' : '- -'}}</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="tree-echarts">
							<div class="tree-echarts-nav tree-title">
								实时状态
							</div>
							<div class="status border-spot">
								<Echarts width="300px" height="250px" key="szqk" :options="gcOptions" class="echarts">
								</Echarts>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom m-t-10 m-b-10 flex">
					<div class="m-r-10">
						<div class="left">
							<div class="bottom-left-nav">
								古树资料
							</div>
							<div class="bottom-left-ul">
								<ul class="bottom-left-ul-first">
									<li>
										<p>树木类型：</p>
										<span>珍稀名木</span>
									</li>
									<li>
										<p>所属机构：</p>
										<span>{{detail.departName || '- -'}}</span>
									</li>
									<li>
										<p>责任人：</p>
										<span>{{detail.principal || '- -'}}</span>
									</li>
									<li>
										<p>维护单位：</p>
										<span>{{detail.maintain || '- -'}}</span>
									</li>
								</ul>
								<ul class="bottom-left-ul-last">
									<li>
										<p>生长地址：</p>
										<span>{{detail.site || '- -'}}</span>
									</li>
									<li>
										<p>保护措施：</p>
										<span>{{detail.others ? detail.others[0].safeguardProcedures : '- -'}}</span>
									</li>
								</ul>
								<div class="bottom-left-title">
									{{detail.others ? detail.others[0].introduction : '- -'}}
								</div>
							</div>
						</div>
						<div class="left-btn">
							<div @click.stop="onClickSkill">技术资料</div>
							<div :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
								@click.stop="onClickVideo">
								<Icon custom="i-icon icon-jiankong11" size="22" />
								摄像头
							</div>
						</div>
					</div>
					<div class="right">
						<div class="right-title tree-title">
							养护作业
						</div>
						<div class="right-day">
							<div class="flex">
								<img src="../../../../assets/new/detail_icon_rili.png" >
								<div>
									<p>养护次数</p>
									<span>{{maintainCount}}</span>
								</div>
							</div>
							<div class="flex">
								<img src="../../../../assets/new/detail_icon_tab.png" >
								<div>
									<p>养护天数</p>
									<span>{{maintainDays}}</span>
								</div>
							</div>
						</div>
						<ul class="right-ul-first">
							<li>
								<p>养护周期：</p>
								<span>{{detail.others ? detail.others[0].maintenanceCycle + '一次' : '- -'}}</span>
							</li>
							<li>
								<p>养护方式：</p>
								<span>{{detail.others ? detail.others[0].curingWay : '- -'}}</span>
							</li>
						</ul>
						<ul class="work-list" v-if="workRecordArr.length>0">
							<li class="work-list-item" v-for="(item,index) in workRecordArr" :key="index">
								<div class="time">{{item.createTime}}</div>
								<div class="name">{{item.createName}}</div>
								<div class="cont">
									{{item.title + ' | '}}{{item.des}}
								</div>
								<div class="status" v-if="detail.others && detail.others[0]">
									{{detail.others ? detail.others[0].curingWay : ''}}
								</div>
								<div class="multimedia">
									<div class="item video-item" v-previewVideo="item.videourl" v-if="item.videourl">
										<Icon custom="i-icon icon-bofang" size="25" color='#fff'></Icon>
									</div>
									<div class="item" v-for="(items,indexs) in item.imgurls" :key="indexs">
										<el-image :src="items" fit="cover" :preview-src-list="[items]"
											class="detail-top-img" v-if="item.imgurls.length != 0">
										</el-image>
									</div>
								</div>
							</li>
							<infinite-loading @infinite="getTreeMaintainPageList" :distance="10" ref="infiniteLoading">
								<span slot="no-results" style="font-size: 16px;">
									暂无更多养护记录
								</span>
								<span slot="no-more" style="font-size: 16px;">
									暂无更多养护记录
								</span>
							</infinite-loading>
						</ul>
						<ul class="work-list" v-else>
							<div class="work-list-not">
								<img src="../../../../assets/new/detail_no.png" >
								暂无数据
							</div>
						</ul>
					</div>
				</div>
			</div>
		</NewSearchDetail>

		<Modal v-model="skillVisible" footer-hide width="1044">
			<div class="skill noScroll">
				<div class="skill-nav">
					技术资料
				</div>
				<div class="skill-title">
					{{technical.name}}
				</div>
				<div class="skill-tip">
					{{technical.maintain}} | {{technical.sphereApplication}}
				</div>
				<img src="../../../../assets/new/detail_pop.png" class="skill-img" />
				<div class="skill-cont">
					<div v-html="technical.cont"></div>
				</div>
			</div>
		</Modal>

		<Modal v-model="issueVisible" footer-hide title="问题整改" width="1024">
			<div class="issue noScroll">
				<ul class="issue-tabs">
					<li @click.stop="onClickIssueTabs(0)" :class="{current:issueTabsIndex == 0}">巡查上报</li>
					<li @click.stop="onClickIssueTabs(1)" :class="{current:issueTabsIndex == 1}">公众投诉</li>
				</ul>
				<div class="issue-title">
					<div class="issue-title-item">
						<span>责任部门</span>
						<MyTreeSelect search v-model="assignTree" :data="assignTreeData" style="width: 163px;">
						</MyTreeSelect>
					</div>
					<div class="issue-title-item">
						<span>问题类型</span>
						<Select v-model="issueTypeValue" style="width:120px">
							<Option v-for="item in issueTypeList" :value="item.id" :key="item.id">{{ item.name }}
							</Option>
						</Select>
					</div>
					<div class="issue-title-item">
						<span>加油日期</span>
						<DatePicker type="date" placeholder="开始时间" style="width: 120px"></DatePicker>
						<span>-</span>
						<DatePicker type="date" placeholder="结束时间" style="width: 120px"></DatePicker>
					</div>
					<div class="issue-title-item">
						<div>查询</div>
						<div>充值</div>
					</div>
				</div>
				<div>
					<Table :columns="patrolColumns" :data="patrolData"></Table>
				</div>
				<div class="issue-page">
					<Page :total="0" size="small" show-elevator show-sizer show-total />
				</div>
			</div>
		</Modal>

	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import MyTreeSelect from '@/components/common/MyTreeSelect';
	import Echarts from '../../../common/Echarts';
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	import InfiniteLoading from 'vue-infinite-loading';
	export default {
		components: {
			NewSearchDetail,
			MyTreeSelect,
			Echarts,
			InfiniteLoading
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				treeImg: require('../../../../assets/demo/tree.png'),
				// 技术资料
				skillVisible: false,
				technical: {},
				// 问题整改
				issueVisible: false,
				// 问题整改 tabs
				issueTabsIndex: 0,
				assignTree: '',
				assignTreeData: [{
					title: '山东蜻蜓数字科技有限公司',
					value: 1,
					children: [{
						title: '奎文区',
						value: 11,
						children: [{
							title: '山东蜻蜓数字科技有限公司',
							value: 111,
							children: [{
								title: '保洁队',
								value: 1111
							}, {
								title: '公厕队',
								value: 1112
							}, {
								title: '运输队',
								value: 1113
							}, {
								title: '建筑队',
								value: 1114
							}, {
								title: '园林队',
								value: 1115
							}]
						}]
					}]
				}],
				issueTypeValue: 1,
				issueTypeList: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '堆弃杂物'
					},
					{
						id: 3,
						name: '垃圾污染'
					},
					{
						id: 4,
						name: '水域污染'
					},
					{
						id: 5,
						name: '排水堵塞'
					},
					{
						id: 6,
						name: '景观污染损坏'
					},
					{
						id: 7,
						name: '设施污染损坏'
					}
				],
				patrolColumns: [{
						title: '问题类型',
						key: 'type'
					},
					{
						title: '上报时间',
						key: 'time'
					},
					{
						title: '问题地点',
						key: 'site'
					},
					{
						title: '问题描述',
						key: 'desc'
					}
				],
				patrolData: [],
				gcOptions: {
					title: {
						text: '土壤状态',
						textStyle: {
							color: '#1EB0FC',
							fontSize: 14
						}
					},
					radar: {
						indicator: [{
								name: '土壤水分',
								max: 260
							},
							{
								name: '土壤温度',
								max: 260
							},
							{
								name: 'PH值',
								max: 260
							},
							{
								name: '有机值',
								max: 260
							},
							{
								name: '矿物质',
								max: 260
							},
						]
					},
					series: [{
						name: '土壤状态',
						type: 'radar',
						data: [{
							value: [100, 260, 150, 200, 146, 243],
							name: '土壤状态'
						}]
					}]
				},
				// 日志记录
				workRecordArr: [
					// {
					// 	createTime:'2021-01-13',
					// 	createName:'赵小强',
					// 	title:'养护达到标准',
					// 	des:'修剪掉多余枯败的枝条，修剪掉顶部过长的枝桠，使养分得以均衡',
					// 	videourl:'',
					// 	imgurls:[
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png'),
					// 		require('../../../../assets/new/detail_icon_rili.png')
					// 	]
					// },{
					// 	createTime:'2021-01-13',
					// 	createName:'赵小强',
					// 	title:'养护达到标准',
					// 	des:'修剪掉多余枯败的枝条，修剪掉顶部过长的枝桠，使养分得以均衡',
					// 	videourl:'',
					// 	imgurls:[]
					// }
				],
				
				pageNum: 1,
				pageSize: 3,
				totalPage: 0,
				// 树种相关字段
				treeVarieties: {},
				maintainCount: 0, // 养护次数
				maintainDays: 0 // 养护天数
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getTreeMaintainList()
					this.getTreeMaintainDays()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.pageNum = 1
					this.totalPage = 0
					this.workRecordArr = []
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchTreeDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.timeInit()
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
					this.getTreeDetailVarieties()
				})
			},
			timeInit() {
				let time = new Date()
				this.day = time.getDate()
			},
			// 获取树种相关字段
			getTreeDetailVarieties() {
				let treeVarietiesId = this.detail.others[0].family.split(',')[1]
				if (treeVarietiesId) {
					this.$http.getTreeDetailVarieties({
						id: treeVarietiesId
					}).then((res) => {
						this.treeVarieties = res.result
					})
				}
			},
			// 获取养护记录
			getTreeMaintainList() {
				let params = {
					treeId: this.dataId,
					page: this.pageNum,
					size: this.pageSize
				}
				this.$http.getMapTreeMaintainList(params).then(res => {
					if (res.code == 200) {
						this.workRecordArr = res.result.treeMaintains.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
						this.maintainCount = res.result.total
						this.totalPage = res.result.pages
						this.pageNum++
					}
				})
			},
			// 获取养护记录分页列表
			getTreeMaintainPageList($state) {
				if (this.pageNum >= this.totalPage) {
					$state.complete()
					return
				}
				let params = {
					treeId: this.dataId,
					page: this.pageNum,
					size: this.pageSize
				}
				this.$http.getMapTreeMaintainList(params).then(res => {
					if (res.code == 200) {
						let arr = res.result.treeMaintains.map(item => {
							item.imgurls = item.imgurls.split(',').filter(items => items)
							return item
						})
						this.workRecordArr = this.workRecordArr.concat(arr)
						this.pageNum++
						$state.loaded()
					}
				})
			},
			// 获取养护天数
			getTreeMaintainDays() {
				let params = {
					id: this.dataId
				}
				this.$http.getMapTreeMaintainDays(params).then(res => {
					if (res.code == 200) {
						this.maintainDays = res.result.conserveDayNum
					}
				})
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 1) return
				let params = {
					equipcode: this.detail.equipcode,
					eqptype: this.detail.eqptype,
					details: this.detail.channels,
				}
				bus.$emit('showPlayVideoModal', params)
			},
			// 技术资料
			onClickSkill() {
				this.skillVisible = true
				this.$store.dispatch('getConserveDetail', this.detail.others[0].technical).then(res => {
					this.technical = res
				})
			},
			// 问题整改
			onClickIssue() {
				this.issueVisible = true
			},
			// 问题整改 tabs
			onClickIssueTabs(i) {
				this.issueTabsIndex = i
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/modal";

	::v-deep {
		.ivu-modal-body {
			padding: 0;
		}
	}

	.search-left {
		font-size: 18px;
		color: #ffffff;
		font-weight: 500;
		line-height: 1;

		.top {
			.left {
				width: 604px;
				height: 666px;
				background: url(../../../../assets/new/detail_666.png) 0 0 no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				
				.left-img{
					width: 206px;
					height: 46px;
					font-size: 16px;
					color: #23CEFD;
					font-weight: bold;
					background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					padding: 3px 0 0 26px;
					margin: 14px 0 0 10px;
					img{
						width: 22px;
						height: 22px;
						margin-right: 10px;
					}
				}
				.left-box{
					flex: 1;
					img {
						width: 550px;
						height: 560px;
						object-fit: cover;
						display: block;
						margin: 12px auto 0;
					}
				}
			}

			.right {
				.tree-msg {
					width: 595px;
					height: 319px;
					background: url(../../../../assets/new/detail_319.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.tree-msg-nav{
						width: 366px;
						height: 46px;
						font-size: 16px;
						background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
						background-size: 100% 100%;
						margin: 17px 0 0 17px;
						padding-left: 26px;
						display: flex;
						align-items: center;
						span{
							color: #23CEFD;
						}
					}
					.tree-msg-detail{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
					.tree-msg-list{
						font-size: 16px;
						color: #999999;
						font-weight: 500;
						line-height: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 35px;
						span{
							color: #FFFFFF;
						}
					}
					.tree-msg-center{
						font-size: 16px;
						display: flex;
						align-items: center;
						padding: 0 35px;
						p{
							color: #999999;
						}
					}
					.tree-ul{
						font-size: 16px;
						display: flex;
						flex-wrap: wrap;
						padding: 0 35px;
						.tree-li{
							width:33.3%;
							display: flex;
							align-items: center;
							margin-bottom: 20px;
							p{
								color: #999999;
							}
						}
					}
					
				}
				.tree-echarts{
					width: 595px;
					height: 343px;
					background: url(../../../../assets/new/detail_343.png) 0 0 no-repeat;
					background-size: 100% 100%;
					position: relative;
					.tree-echarts-nav{
						width: 206px;
						height: 46px;
						background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
						background-size: 100% 100%;
						position: absolute;
						left: 17px;
						top: 17px;
					}
				}

				.status {
					width: 595px;
					height: 343px;

					.echarts {
						position: absolute;
						left: 50%;
						top: 20%;
						transform: translate(-50%);
					}
				}
			}
		}

		.bottom {
			.left {
				width: 604px;
				height: 356px;
				font-weight: 500;
				background: url(../../../../assets/new/detail_418.png) 0 0 no-repeat;
				background-size: 100% 100%;
				overflow: hidden;
				.bottom-left-nav{
					width: 206px;
					height: 46px;
					font-size: 16px;
					color: #23CEFD;
					background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
					background-size: 100% 100%;
					margin: 11px 0 0 9px;
					display: flex;
					align-items: center;
					padding-left: 26px;
				}
				.bottom-left-ul{
					font-size: 16px;
					padding: 0 30px;
				}
				.bottom-left-ul-first{
					display: flex;
					flex-wrap: wrap;
					li{
						width: 50%;
						line-height: 1.5;
						display: flex;
						align-items: center;
						margin-bottom: 20px;
						p{
							color: #999999;
						}
					}
				}
				.bottom-left-ul-last{
					li{
						display: flex;
						align-items: center;
						margin-bottom: 20px;
						p{
							color: #999;
						}
					}
				}
				.bottom-left-title{
					line-height: 1.5;
					height: 120px;
					overflow: auto;
				}
				.title {
					line-height: 65px;
					padding-left: 20px;
					border-bottom: 0;
				}

				.title::after {
					height: 0px;
				}

				.btn {
					display: flex;
					flex-wrap: wrap;
					padding-top: 20px;
					justify-content: center;

					div {
						width: 116px;
						height: 36px;
						line-height: 36px;
						text-align: center;
						background: #095844;
						color: #fff;
						border: 1px solid #15876a;
						margin-right: 46px;
						margin-bottom: 20px;
						cursor: pointer;
					}
				}
			}
			
			.left-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30px 0;
				div{
					width: 120px;
					height: 45px;
					line-height: 45px;
					text-align: center;
					font-size: 14px;
					color: #FFFFFF;
					font-weight: 500;
					background: rgba(30, 176, 252, 0.35);
					border: 1px solid #1EB0FC;
					border-radius: 4px;
				}
				div:first-child{
					margin-right: 60px;
				}
			}

			.right {
				width: 594px;
				height: 460px;
				background: url(../../../../assets/new/detail_512.png) 0 0 no-repeat;
				background-size: 100% 100%;
				overflow: hidden;
				
				.right-title{
					width: 366px;
					height: 46px;
					background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
					background-size: 100% 100%;
					margin: 20px 0 0 15px;
					padding-left: 26px;
					display: flex;
					align-items: center;
				}
				.right-day{
					height: 80px;
					border-bottom: 1px solid #23DBFC;
					display: flex;
					align-items: center;
					margin: 0 35px;
					img{
						width: 46px;
						height: 46px;
						margin-right: 10px;
					} 
					p{
						font-size: 16px;
						color: #999999;
					}
					.flex{
						width: 30%;
						div{
							display: flex;
							flex-direction: column;
							justify-content: space-around;
						}
					}
				}
				.right-ul-first{
					font-size: 16px;
					color: #FFFFFF;
					line-height: 1;
					display: flex;
					align-items: center;
					margin: 12px 35px;
					li{
						width: 50%;
						display: flex;
						align-items: center;
						p{
							color: #999999;
						}
					}
				}

				.work-icon {
					background-image: linear-gradient(-90deg, #25bb96, #7aa948);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				
				.work-list::-webkit-scrollbar{
					width: 5px;
				}
				.work-list::-webkit-scrollbar-thumb{
					background-color: #CCCCCC;
				}
				.work-list {
					height: 250px;
					margin: 0 35px;
					overflow-y: auto;
					
					.work-list-not{
						font-size: 16px;
						color: #FFFFFF;
						text-align: center;
						img{
							width: 160px;
							height: 160px;
							display: block;
							margin: 20px auto 0;
						}
					}

					.work-list-item {
						margin-bottom: 20px;
						position: relative;

						.time {
							font-size: 16px;
							color: #fff;
							margin-bottom: 10px;
						}

						.name {
							font-size: 14px;
							color: #999999;
							margin-bottom: 10px;
						}

						.cont {
							font-size: 14px;
							color: #999999;
							line-height: 1.2;
						}

						.status {
							line-height: 30px;
							background: #666666;
							border-radius: 15px;
							font-size: 10px;
							color: #fff;
							text-align: center;
							padding: 0 15px;
							position: absolute;
							right: 0;
							top: 0;
						}

						.multimedia {
							display: flex;
							flex-wrap: wrap;

							.item {
								width: 25%;
								margin-top: 10px;

								img {
									width: 100%;
								}
							}

							.item:nth-child(3n) {
								margin-right: 0;
							}

							.video-item {
								position: relative;
								background: #797979;

								i {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
								}
							}
						}
					}
				}
			}
		}
	}

	// 边框的点
	.border-spot {
		// border: 1px solid rgba(255, 255, 255, 0.2);
		// position: relative;
	}

	// .border-spot::after {
	// 	content: "";
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 1px;
	// 	box-sizing: border-box;
	// 	border-left: 3px solid #fff;
	// 	border-right: 3px solid #fff;
	// 	background: rgba(255, 255, 255, 0.1);
	// }

	.border-spot::before {
		// content: "";
		// position: absolute;
		// left: 0;
		// top: 0;
		// width: 100%;
		// height: 1px;
		// box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	// .border-bottom-spot::after {
	// 	content: "";
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 1px;
	// 	box-sizing: border-box;
	// 	border-left: 3px solid #fff;
	// 	border-right: 3px solid #fff;
	// 	background: rgba(255, 255, 255, 0.1);
	// }

	// 列表
	.list {
		font-size: 18px;

		p {
			color: #999999;
		}

		span {
			color: #ffffff;
		}
	}

	.skill {
		width: 1044px;
		height: 755px;
		background: url(../../../../assets/new/detail_pop_bgc.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow-y: auto;
		
		.skill-nav{
			width: 306px;
			height: 46px;
			font-size: 16px;
			color: #23CEFD;
			font-weight: bold;
			background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding-left: 26px;
			margin: 22px 0 0 14px;
		}

		.skill-title {
			text-align: center;
			font-size: 26px;
			color: #FFFFFF;
			font-weight: bold;
			margin: 40px 0 20px;
		}

		.skill-tip {
			text-align: center;
			font-size: 20px;
			font-weight: 500;
			color: #CCCCCC;
		}
		.skill-img{
			width: 972px;
			height: 230px;
			display: block;
			margin: 20px auto;
		}

		.skill-cont {
			height: 260px;
			color: #fff;
			word-break: break-all;
			margin: 0 36px;
			overflow: auto;
		}
	}

	.issue {
		.issue-tabs {
			display: flex;
			padding: 0 14px;

			li {
				height: 39px;
				line-height: 39px;
				box-sizing: border-box;
				margin: 0 15px;
				color: #fff;
				cursor: pointer;
			}

			.current {
				color: #25bb96;
				border-bottom: 2px solid #25bb96;
			}
		}

		.issue-title {
			display: flex;
			background: #3a3c3e;
			padding: 13px 0;

			.issue-title-item {
				display: flex;
				align-items: center;
				margin-right: 6px;
				vertical-align: top;

				span {
					text-align: right;
					vertical-align: middle;
					// float: left;
					font-size: 14px;
					color: #515a6e;
					line-height: 1;
					padding: 10px 12px 10px 0;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					color: rgba(255, 255, 255, 0.65);
					padding-left: 20px;
				}
			}

			.issue-title-item:last-child {
				width: 15%;
				justify-content: flex-end;
				color: #ffffff;

				div {
					width: 60px;
					line-height: 32px;
					text-align: center;
					border-radius: 4px;
				}

				div:first-child {
					background: #25bb96;
					margin-right: 5px;
				}

				div:last-child {
					border: 1px solid rgba(230, 230, 230, 0.4);
				}
			}
		}

		.issue-page {
			height: 44px;
			line-height: 44px;
			text-align: center;
		}
	}
	.tree-title{
		font-size: 16px;
		color: #FFFFFF;
		line-height: 1;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding-left: 26px;
	}
	::v-deep{
		.ivu-modal-body {
		    padding: 0;
		}
		.ivu-modal-content {
		    box-shadow: 0 0 5px 0 rgba(37,187,150,0);
		    background: rgba(26, 26, 26, 0);
		}
		.ivu-modal-close {
		    right: 20px;
		    top: 20px;
		}
	}
</style>
